<template>
  <div v-loading="pageLoading" class="app-container page-full-screen">
    <el-card class="filter-container" shadow="never">
      <span>API生成：</span>
      <el-input v-model="tableName" class="input-width" placeholder="请输入表名" />
      <el-button type="primary" @click="generate">生成</el-button>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets" />
      <span>生成代码</span>

      <el-tabs v-model="activeName">
        <el-tab-pane v-for="key in tabList" :key="key" :label="apiList[key].title" :name="key">
          <template v-if="apiList[key].url">
            <span>方法名：</span>
            <el-input v-model="apiList[key].url" />
            <el-button type="warning" @click="copy(apiList[key].url)">复制</el-button>
            <div class="json-box">
              <p class="json-title">Body:
                <el-button type="warning" @click="copy(apiList[key].json.body)">复制</el-button>
              </p>
              <vue-json-editor :value="jsonPar(apiList[key].json.body)" />
            </div>
            <div class="json-box">
              <p class="json-title">
                Response:
                <el-button type="warning" @click="copy(apiList[key].json.response)">复制</el-button>
              </p>
              <vue-json-editor :value="jsonPar(apiList[key].json.response)" />
            </div>
          </template>
          <p v-else class="no-msg"> 暂无数据 </p>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
import vueJsonEditor from 'vue-json-editor'

import msgbox from '@/common/msgbox'

Vue.use(VueClipboard)
export default {
  name: 'Statements',
  components: {
    vueJsonEditor
  },
  data() {
    return {
      pageLoading: false,
      activeName: 'list',
      tableName: 'orders',

      apiList: {
        list: { url: '', json: {}, title: '列表接口' },
        add: { url: '', json: {}, title: '添加接口' },
        update: { url: '', json: {}, title: '修改接口' },
        info: { url: '', json: {}, title: '详情接口' }
      }
    }
  },
  computed: {
    tabList() {
      return Object.keys(this.apiList)
    }
  },
  created() {
    this.generate()
  },
  methods: {
    jsonPar(val) {
      return JSON.parse(val)
    },
    generate() {
      if (!this.tableName.trim()) {
        return this.$message.error('请输入表名')
      }
      // 调用接口生成api数据

      const that = this
      this.pageLoading = true
      this.$g.ajax({
        path: 'autoApis/generate',
        method: 'post',
        data: {
          table: this.tableName
        },
        cbSuccess: function(res) {
          const { add, info, list, update } = res.memo
          that.apiList.add = Object.assign(that.apiList.add, add)
          that.apiList.info = Object.assign(that.apiList.info, info)
          that.apiList.list = Object.assign(that.apiList.list, list)
          that.apiList.update = Object.assign(that.apiList.update, update)
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        },
        cbFinally() {
          that.pageLoading = false
        }
      })
    },
    copy(text) {
      this.$copyText(text).then((e) => {
        // success
        this.$message.success('复制成功')
      }, (e) => {
        // fail
        this.$message.warning('复制失败')
      })
    }
  }
}
</script>

<style scoped>
.operate-container {
  margin-top: 20px;
}

.no-msg {
  padding: 10px 0;
  text-align: center;
  color: #9c9c9c;
}

.json-box {
  margin-top: 20px;
}

.json-title {
  padding: 10px 0;
}

</style>
